<!--
  ~ Copyright 1999-2022 Alibaba Group Holding Ltd.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="commonHead">
    <meta charset="UTF-8">
    <title>AppActive Demo</title>

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery-3.2.1.slim.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script>
        window.onload=function(){
            setMenu();
            hideGateway();
            refresh();
            drawArrow();
        };

        // function drawArrow() {
        //     let activeColor = "#00CC66";
        //
        //     let chainNode = $("#chain");
        //     let chain = JSON.parse(chainNode.val());
        //     let num = chain.length;
        //
        //     $("#center-gateway").css({backgroundColor: activeColor});
        //
        //     chain.forEach((val)=>{
        //       let elem = $("#" + val.unitFlag + "-" + val.app);
        //       elem.css({backgroundColor: activeColor});
        //     });
        // }

        function drawArrow() {
            let activeColor = "#FFCC66";
            activeColor = "#00CC66";

            let interval = 700;

            let chainNode = $("#chain");
            let chain = JSON.parse(chainNode.val());
            let num = chain.length;

            $("#center-gateway").css({backgroundColor: activeColor});
            for(let i = 0; i < num; i++){
                (function(i){setTimeout(function(){
                    let val = chain[i];
                    lightUp(val,activeColor)
                },interval*(num-i))})(i)
            }
        }

        function lightUp(val,activeColor) {
            let id = val.unitFlag + "-" + val.app
            console.log(id)
            let elem = $("#" + id);
            elem.css({backgroundColor: activeColor});
        }

        function hideGateway() {
            let host = window.location.host;
            if ("demo.appactive.io" !== host){
                $("#domainArea").hide();
            }
        }

        function setMenu() {
            let currentNode = $("#current");
            let current = currentNode.val();
            let elem = $("#" + current);
            elem.addClass("active");
        }

        function refresh(routerIdNew){
	        let routerId = routerIdNew === undefined ? getRouterId() : routerIdNew;
	        // let element = document.getElementById("routerId");
	        // element.value = routerId;
	        document.cookie = "r_id="+routerId+"; path=/";
        }

        function setRouterId() {
	        let element = document.getElementById("r_id");
	        let routerId = element.value;
	        // 整个网站生效 用 /
	        refresh(routerId);
        }

        function getRouterId() {
            let routerId = getQuery("r_id")
            if (routerId === undefined){
                routerId = getCookie("r_id")
            }
            if (routerId === undefined){
              routerId = 24
            }
            return routerId;
        }

        function getCookie(cname){
	        let name = cname + "=";
	        let ca = document.cookie.split(';');
	        for(let i=0; i<ca.length; i++){
		        let c = ca[i].trim();
		        if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
	        }
	        return undefined;
        }

        function getQuery(variable){
          let query = window.location.search.substring(1);
          let vars = query.split("&");
          for (let i=0;i < vars.length;i++) {
            let pair = vars[i].split("=");
            if(pair[0] === variable){
              return pair[1];
            }
          }
          return undefined;
        }
    </script>
</head>
<body>
    <header th:fragment="pageHeader">
        <div class="container">
            <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">App-Active Demo</a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li id="listProduct"><a class="nav-link" th:href="@{'/listProduct'}">列表</a></li>
                        <li id="detailProduct"><a class="nav-link" th:href="@{'/detailProduct'}">详情</a></li>
                        <li id="buyProduct"><a class="nav-link" th:href="@{'/buyProduct'}">下单</a></li>
                    </ul>
                </div>
            </nav>

            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-4" id="domainArea">
                            <div class="card" style="width: 8rem">
                                <img class="card-img-top" src="/img/gateway.png">
                                <div class="card-body" id="center-gateway">
                                    <h5 class="card-title" style="text-align: center">center</h5>
                                    <h5 class="card-title" style="text-align: center">gateway</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div th:each="unit: ${metaData.unitList}" class="row">
                        <div th:each="app: ${metaData.appList}" class="col-md-4">
                            <div class="card" style="width: 8rem">
                                <img class="card-img-top" th:src="'/img/' + ${app} + '.png'">
                                <div class="card-body" th:id="@{${unit} + '-' + ${app}}">
                                    <h5 class="card-title" style="text-align: center" th:text="${unit}"></h5>
                                    <h5 class="card-title" style="text-align: center" th:text="${app}"></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <input hidden th:value="${result}" id="result"/>
        <input hidden th:value="${chain}" id="chain"/>
        <input hidden th:value="${current}" id="current"/>
    </header>
</body>
</html>
